<template>
  <n-layout>
    <n-layout-header class="header-top">
      <div>
        <div class="header-edit-area">
          <h2>邦布</h2>
          <GitEidtButton :path="editPathMap.ZZZ.Bangboo" />
        </div>
        <n-skeleton v-if="loading" :width="150" :sharp="false" size="medium" />
        <n-gradient-text v-else :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }">
          共{{ total }}位，已展示{{ bangbooList.length }}个
        </n-gradient-text>
      </div>
      <n-skeleton v-if="loading" :width="300" :sharp="false" size="medium" />
      <BlueUrlSelect v-else />
    </n-layout-header>
    <n-layout>
      <n-layout-header>
        <n-space v-show="searchShow" v-if="loading" :style="custStyle">
          <n-skeleton v-for="(item, index) in new Array(4)" :key="index" :width="200" :sharp="false" size="medium" />
        </n-space>
        <n-space v-show="searchShow" v-else class="space-main" :style="custStyle">
          <n-select :value="star" @update:value="handleStar" :options="relationInfo?.star"
            :style="ua ? 'width: 200px' : ''" />
          <n-select :value="element" @update:value="handleElement" :options="relationInfo?.element"
            :style="ua ? 'width: 200px' : ''" />
          <n-input :value="searchName" @keyup.enter="handleNameChg" @update:value="handleName" type="text"
            placeholder="搜索邦布的名称" :style="ua ? 'width: 200px' : 'min-width: 200px;'" />
          <n-space :style="ua ? `flex:1;` : `min-width: 200px;`">
            <n-button type="success" style="width: 84px;" @click="searchBangbooList(1)">搜索</n-button>
            <n-button type="warning" @click="clickReset">重置条件</n-button>
          </n-space>
        </n-space>
        <n-divider v-if="!ua" @click="searchShow = !searchShow">{{ searchShow ? "收起搜索" : "展开搜索" }}</n-divider>
      </n-layout-header>
      <n-layout-content has-sider>
        <n-space v-if="loading" :style="custStyle">
          <div v-for="(item, index) in new Array(20) " :key="index">
            <n-skeleton :width="100" :height="123" :sharp="false" size="medium" />
          </div>
        </n-space>
        <n-space v-else-if="!loading && bangbooList.length > 0" :style="custStyle">
          <div v-for="(item, index) in bangbooList" :key="index">
            <BluePicCard :src="item.imgSrc" :item="item" :url="item.wiki_URL" :img-list="[]" />
          </div>
        </n-space>
        <n-space v-else style="width: 100%;" :style="custStyle">
          <n-empty description="所选条件的数据为空">
            <template #icon>
              <n-icon>
                <Aperture />
              </n-icon>
            </template>
          </n-empty>
        </n-space>
      </n-layout-content>
      <n-layout content-style="overflow-x: scroll;">
        <n-space v-if="loading" :style="custStyle">
          <n-skeleton :width="300" :sharp="false" size="medium" />
        </n-space>
        <n-space v-else :style="custStyle">
          <n-pagination :page="page.pageNum" :page-size="page.pageSize" :item-count="total"
            :on-update:page="searchBangbooList" show-size-picker :page-sizes="[10, 50, 100, 150]"
            :on-update:page-size="changePageSize" />
        </n-space>
      </n-layout>
    </n-layout>
  </n-layout>
</template>

<script lang="ts" setup>
import BluePicCard from "@/components/Card/BluePicCard.vue";
import { useMessage } from "naive-ui";
import { getZZZBangbooInfo } from "@/api/zzz";
import { ref, onMounted, onBeforeMount } from "vue";
import { Page, queryCommonUrl, queryZZZRelation } from "@/utils"
import { useLoadingBar } from 'naive-ui'
import { Aperture } from "@vicons/ionicons5";
import { checkUA } from "@/utils";
import BlueUrlSelect from "@/components/content/BlueUrlSelect.vue";
import GitEidtButton from "@/components/content/GitEidtButton.vue";
import { editPathMap } from "@/config";

const ua = ref(checkUA())
const loading = ref(false)
const loadingBar = useLoadingBar()
const message = useMessage();

let searchShow = ref(true)
let searchName = ref("");
let element = ref<number>(-2);
let star = ref<number>(-2);
let page = ref<Page>({
  pageNum: 1,
  pageSize: 100,
});
let total = ref(0)
let bangbooList = ref<Array<any>>([]);
let custStyle = ref<string>(`
    ${ua.value ? 'margin: 20px;' : 'margin:2px;'}
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  `)

const handleElement = (value: any) => {
  element.value = value
  searchBangbooList(1)
}
const handleStar = (value: any) => {
  star.value = value
  searchBangbooList(1)
}

const handleName = (value: any) => {
  searchName.value = value
}
const handleNameChg = (event: Event) => {
  searchBangbooList(1)
}
const clickReset = () => {
  searchName.value = ""
  searchBangbooList(1)
}

const changePageSize = (size: number) => {
  page.value.pageSize = size
  searchBangbooList(1)
}

const relationInfo = ref<any>({})

const queryBangbooList = async () => {
  loadingBar.start()
  loading.value = true
  let params = {
    name: searchName.value,
    star: star.value,
    element: element.value,
    page: page.value,
  } as any;
  let { code, data, msg } = await getZZZBangbooInfo(params) as any;
  if (code != 200) {
    message.error(msg);
    loadingBar.finish()
    loading.value = false
    return;
  }
  total.value = data.total
  const { zzz_base, zzz_url } = await queryCommonUrl() as any
  const mhyRoleUrl = `${zzz_base}${zzz_url}`
  bangbooList.value = data?.records.map((e: any) => {
    e.mhy_URL = mhyRoleUrl.replace('{id}', e.mhy_url)
    e.imgSrc = e.icon_url
    return e
  })
  setTimeout(() => {
    loadingBar.finish()
  }, 500)
  loading.value = false
}

const searchBangbooList = async (e: number) => {
  page.value.pageNum = e
  bangbooList.value = []
  total.value = 0
  queryBangbooList()
}

onBeforeMount(async () => {
  relationInfo.value = await queryZZZRelation() as any
})
onMounted(() => {
  queryBangbooList()
})
</script>

<style lang="scss"></style>
